<template>
  <div class="app-container">
    <top />
    <el-main style="width:1250px; margin:0px auto">

      <el-table
        style="width: 100%"
        :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      >
        <el-table-column label="商品">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="url+scope.row.thing.img"
              fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="thing.name"
          label="商品名称"
        />
        <el-table-column prop="thing.thingtype.type" label="类型" />
        <el-table-column prop="thing.thingtype2.type" label="区域" />
        <el-table-column prop="thing.price" label="价格" />
        <el-table-column align="center" label="操作" width="350" fixed="right">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="Del(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="tabListPage">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="sum"
          @current-change="handleCurrentChange"
        />
      </div>

      <el-button type="primary" icon="el-icon-shopping-cart-full" @click="buy()">总金额{{ this.summoney }}元</el-button>

    </el-main>
    <el-footer><foot /></el-footer>
  </div>
</template>

<script>
import { GetList, Del } from '@/api/buying'
import top from './components/top.vue'
import foot from './components/foot.vue'
import { Add } from '@/api/buy'
export default {
  components: {
    top, foot
  },
  data() {
    return {
      url: process.env.VUE_APP_BASE_API,
      tableData: [],
      pageSize: 20,
      currentPage: 1,
      sum: 0,
      query: {
        clientId: this.$store.state.admin.token
      },
      summoney: 0
    }
  },
  created() {
    this.Bind()
  },
  methods: {
    async Bind() {
       if (this.$store.state.admin.token == null||this.$store.state.admin.token === '') {
        this.$message({
          message: '请先登陆',
          type: 'warning'
        })
        return false
      }
      await GetList(this.query).then((list) => {
        this.tableData = list.data.buying
        this.sum = this.tableData.length
        this.summoney = list.data.sum
      })
    }, async buy() {
      await Add(this.query).then(res => {
        this.$alert(res.msg, '操作提示：', {
          confirmButtonText: '确定',
          callback: action => {
            if (res.success) { this.$router.push('index') }
          }
        })
      })
    }, async Del(obj) {
      await Del(obj.row.id).then(res => {
        this.$message({
          message: res.msg,
          type: res.icon
        })
        if (res.success) {
          this.tableData.splice(obj.$index, 1)
        }
      })
    },
    handleCurrentChange(val) {
      // 翻页事件
      this.currentPage = val
      this.Bind()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
